<template>
  <el-dialog
    v-model="dialogVisible"
    title="重置密码"
    width="40%"
    :before-close="handleClose"
    :close-on-click-modal="false"
    v-if="dialogVisible"
  >
    <div class="resetPass">
      <el-form
      ref="formRef"
        :inline="true"
        :rules="rules"
        :model="params"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="姓名">
          <div class="stuName">
            <el-input v-model="params.name" disabled />
          </div>
        </el-form-item>
        <el-form-item label="新密码" prop="oldpass">
          <el-input v-model="params.oldpass" show-password clearable />
        </el-form-item>
        <el-form-item label="确认密码" prop="pass">
          <el-input v-model="params.pass" show-password clearable />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          style="font-size: 12px"
          @click="(dialogVisible = false), emits('setIs', false);data.params.oldpass='';data.params.pass=''"
          >取消</el-button
        >
        <el-button
          style="font-size: 12px"
          type="primary"
          @click="determine(formRef)"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { inject, reactive, toRefs, watch, ref } from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance } from "element-plus";
// 引入封装接口
import { setPass } from "../../apis/student/student";
const formRef = ref<FormInstance>();
const data = reactive({
  params: {
    id: 0,
    name: "",
    classid: 1,
    username: "",
    pass: "",
    oldpass: "",
  },
  dialogVisible: false,
});
const { params, dialogVisible }: any = toRefs(data);
const datas: any = inject("data");
watch([datas], () => {
  params.value.name = datas.line.name;
  params.value.id = datas.line.id;
  params.value.username = datas.line.username;
  // console.log(Show.value)
});
const handleClose = (done: () => void) => {
  done();
  emits("setIs", false);
};
// 子接收父的参数
const props = defineProps({
  isShow: {
    type: Boolean,
  },
});
watch([props], () => {
  dialogVisible.value = props.isShow;
});
const emits = defineEmits(["setIs"]);
// 密码验证
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (data.params.oldpass !== "") {
      if (!params.value) return;
      // params.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validateConfirmPass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== data.params.oldpass) {
    callback(new Error("两次密码不一致"));
  } else {
    callback();
  }
};
// 密码验证
const rules = reactive({
  oldpass: [
    { validator: validatePass, trigger: "blur",required: true },
    { min: 6, max: 16, message: "请输入6-16位的密码", trigger: "blur",required: true },
  ],
  pass: [{ validator: validateConfirmPass, trigger: "blur",required: true }],
});
// 请求修改接口
const upPass = async() => {
  const res: any = await setPass(params.value);
  if (res.errCode === 10000) {
    datas.Show = true;
    ElMessage.success("修改成功");
    emits("setIs", false);
  } else {
    ElMessage.error(res.errMsg);
  }
  dialogVisible.value = false;
  emits("setIs", false);
};
// 确定
const determine = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      upPass()
      data.params.oldpass=''
      data.params.pass=''
    } else {
      return;
    }
  });
};
</script>
<style scoped>
@import url("../../static/css/student/resetPass.css");
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>